// import React from 'react'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { INCREMENT, DECREMENT } from '../redux/action-types'
import { increment, decrement } from '../redux/actions.js'
import '../App.css'
class App extends Component {
  static propTypes = {
    count: PropTypes.number.isRequired,
    increment: PropTypes.func.isRequired,
    decrement: PropTypes.func.isRequired,
  }

  // state = {
  //   count: 0,
  // }
  increment = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1
    //2、得到原本的count 状态 并计算新的count
    // const count = this.state.count + number
    //3、更新状态
    // this.setState({ count })
    //2、调用store 的方法更新状态
    // this.props.store.dispatch(actions.increment(number))
    this.props.increment(number)
  }
  decrement = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1

    //2、得到原本的count 状态 并计算新的count
    // const count = this.state.count - number
    //3、更新状态
    // this.setState({ count })
    //2、调用store 的方法更新状态
    // this.props.store.dispatch(actions.decrement(number))
    this.props.decrement(number)
  }
  incrementIfOdd = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1
    //2、得到原本的count 状态
    // const count = this.state.count
    // const count = this.props.store.getState()
    const count = this.props.count
    //3、判断 满足条件才更新状态
    if (count % 2 == 1) {
      // this.setState({ count: count + number })
      // this.props.store.dispatch(actions.increment(number))
      this.props.increment(number)
    }
  }
  incrementAsync = () => {
    //1、得到选择增加数量
    const number = this.select.value * 1
    //2、得到原本的count 状态 并计算新的count
    // const count = this.state.count
    //3、启动延时定时器 更新状态
    setTimeout(() => {
      // this.setState({ count: count + number })
      // this.props.store.dispatch(actions.increment(number))
      this.props.increment(number)
    }, 1000)
  }
  render() {
    const { count } = this.props
    // const count = this.props.store.getState()
    return (
      <div className="App">
        <p>click {count} times</p>
        <div>
          <select ref={(select) => (this.select = select)}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          &nbsp;&nbsp;
          <button onClick={this.increment}>+</button>&nbsp;&nbsp;
          <button onClick={this.decrement}>-</button>&nbsp;&nbsp;
          <button onClick={this.incrementIfOdd}>increment if odd</button>
          &nbsp;&nbsp;
          <button onClick={this.incrementAsync}>increment async</button>
        </div>
      </div>
    )
  }
}
// function App() {}

// export default connect((state) => ({ count: state }), { increment, decrement })(
//   App,
// )
